<!--
 * @Description: 
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-08-02 09:58:40
 * @LastEditTime: 2021-08-04 15:51:26
 * @FilePath: \cscec-pms-admin\src\components\BaseTextarea\index.vue
-->
<template>
  <div class="BaseTextarea-container">
    <a-textarea
      v-model="localValue"
      :placeholder="disabled ? '' : placeholder"
      :disabled="disabled"
      :max-length="maxLength"
      v-bind="$attrs"
      :auto-size="autoSize"
      :style="{'resize': showStretch ? 'vertical' : 'none', 'padding-right': !disabled ? '40px' : '11px'}"
      v-on="$listeners"
    />
    <span
      v-if="maxLength<10001 && showLimitTip && !disabled"
      class="tips-info"
    >{{ tipsText }}</span>
  </div>
</template>

<script>
export default {
  name: 'BaseTextarea',
  model: {
    event: 'packageInput'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    autoSize: {
      type: [String, Object],
      default() {
        return { minRows: 3, maxRows: 5 }
      }
    },
    // 默认长度限制300
    maxLength: {
      type: Number,
      default: 300
    },
    // 是否显示限制字数的提示文字
    showLimitTip: {
      type: Boolean,
      default: true
    },
    // 是否显示右下角的拉伸样式
    showStretch: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    tipsText() {
      return `${this.localValue ? this.localValue.length : 0}/${this.maxLength}`
    },
    localValue: {
      get() {
        return this.value
      },
      set(val) {
        // 去除输入的HTML标签
        const newv = val.replace(/<[^>]+>/g, '')
        this.$emit('packageInput', newv)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.BaseTextarea-container {
  position: relative;

  .tips-info {
    position: absolute;
    right: 12px;
    bottom: 0;
  }
}
</style>
